<template>
	<el-card shadow="hover" v-if="cardData" class="position-relative">
		<!-- <my-corner-mark v-if="cardData.onlineState && controls">已上线</my-corner-mark> -->
		<div class="flex s-center m-b-10">
			<el-text truncated class="f1 w0">{{ cardData.title }}</el-text>
			<el-popover :width="300" trigger="hover">
				<template #reference> <my-icon icon="More" class="pointer" /></template>
				<my-table
					row-class-name="pointer"
					:data="cardData.publishVersionVoList"
					:columns="[
						{
							label: '版本',
							prop: 'publishVersion',
							align: 'center',
							width: 80
						},
						{
							label: '发布时间',
							prop: 'createTime',
							align: 'center',
							width: 180
						}
					]"
					@row-click="(row) => previewHandle(row)"
					max-height="200"
				>
					<template #empty> 暂无数据 </template>
				</my-table>
			</el-popover>
		</div>

		<!-- 中间 -->
		<div style="aspect-ratio: 124/69; font-size: 0" class="pointer" @click="previewHandle(cardData)">
			<el-image
				class="w100 h100"
				fit="contain"
				:src="cardData?.imgFileUrl || cardData?.imgFileInfo?.storageUrl || getImgUrl('project/moke.png')"
			/>
		</div>

		<div class="flex m-end s-center m-t-10" v-if="controls">
			<!-- 工具 -->
			<n-space align="center">
				<n-tooltip placement="bottom" trigger="hover" v-for="item in fnBtnList" :key="item.key">
					<template #trigger>
						<el-button size="small" :icon="item.icon" circle plain @click="item.handle" />
					</template>
					{{ item.label }}
				</n-tooltip>
			</n-space>
		</div>
	</el-card>
</template>

<script setup>
import { showSite, closeSite, publishSite } from '@/api/website';

const props = defineProps({
		cardData: {
			type: Object,
			default: () => {}
		},
		controls: {
			type: Boolean,
			default: true
		},
		deleteFn: Function,
		updateFn: Function,
		detailFn: Function,
		getList: Function
	}),
	fnBtnList = computed(() =>
		props.cardData.onlineState
			? [
					{
						label: '下线',
						handle: unPublishFn,
						icon: 'FolderDelete'
					},
					{
						label: '修改',
						handle: editFn,
						icon: 'Edit'
					},
					{
						label: '编辑',
						handle: arrangeFn,
						icon: 'Hammer'
					},
					{
						label: '新版发布',
						handle: releaseFn,
						icon: 'Promotion'
					}
				]
			: [
					{
						label: '上线',
						handle: publishFn,
						icon: 'FolderChecked'
					},
					{
						label: '修改',
						handle: editFn,
						icon: 'Edit'
					},
					{
						label: '编辑',
						handle: arrangeFn,
						icon: 'Hammer'
					},
					{
						label: '删除',
						handle: () => props.deleteFn(props.cardData),
						icon: 'Trash'
					}
				]
	);

// 下线
function unPublishFn() {
	confirm('此操作将下线站点, 是否继续?')
		.then(() => {
			closeSite({ id: props.cardData.id }).then(() => {
				props.getList();
				msgSuccess('站点下线成功！');
			});
		})
		.catch(() => {
			msgInfo('已取消操作！');
		});
}
// 上线
function publishFn() {
	if (props.cardData.homePageId !== '-1') {
		confirm('此操作将上线站点, 是否继续?')
			.then(() => {
				showSite({ id: props.cardData.id }).then(() => {
					props.getList();
					msgSuccess('站点上线成功！');
				});
			})
			.catch(() => {
				msgInfo('已取消操作！');
			});
	} else {
		msgInfo('该站点下暂无页面，请编辑！');
	}
}
// 发布
function releaseFn() {
	confirm('此操作将发布站点, 是否继续?')
		.then(() => {
			publishSite({ id: props.cardData.id }).then(() => {
				props.getList();
				msgSuccess('站点发布成功！');
			});
		})
		.catch(() => {
			msgInfo('已取消操作！');
		});
}
// 修改
function editFn() {
	props.updateFn(props.cardData);
}
// 编辑
function arrangeFn() {
	const url = $router.resolve({
		name: 'ChartHome',
		params:
			props.cardData.homePageId !== '-1'
				? { websiteId: props.cardData.id, pageId: props.cardData.homePageId }
				: { websiteId: props.cardData.id }
	});
	$store.chart.pageTabs = [];
	window.open(url.href, '_blank');
}
// 预览
function previewHandle(row) {
	if (row.homePageId && row.homePageId !== '-1') {
		const { href } = $router.resolve({
			name: 'ChartPreview',
			params: {
				websiteId: row.id,
				pageId: row.homePageId
			}
		});
		window.open(href, '_blank');
	} else {
		msgInfo('该站点下暂无页面，请编辑！');
	}
}
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
	padding: 10px;
}
</style>
